<template>
  <!-- 预约时段统计 -->
  <div class="chart-box2">
    <div class="chart-title w-100p">预约时段统计</div>
    <div class="chart-content">
      <div class="chart-container" :id="chartId"></div>
    </div>
  </div>
</template>

<script>
import {
  defineComponent,
  onMounted,
  reactive,
  toRefs,
  onBeforeUnmount,
  nextTick,
  toRaw,
  watch,
} from "vue";
import { Chart, registerTheme } from "@antv/g2";
import common from "../../utils/common";
import store from "../../../../store";

export default defineComponent({
  name: "MeetingRoomOrderDuration",
  setup() {
    const state = reactive({
      chartId: "meetingRoomOrderDurationChart",
      chart: null,
      yData: [],
      xData: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
      data: [],
    });

    const initChart = () => {
      const data = state.data;

      const source = data.map((arr) => {
        return {
          name: arr[0],
          time: arr[1],
          value: arr[2],
        };
      });

      state.chart = new Chart({
        container: state.chartId,
        autoFit: true,
        theme: "chartTheme",
      });

      state.chart.data(source);

      state.chart.scale("name", {
        type: "cat",
        values: state.xData,
      });
      state.chart.scale("time", {
        type: "cat",
        values: state.yData,
        alias: "预约时间",
      });
      state.chart.scale("value", {
        nice: true,
        alias: "预约次数",
      });

      state.chart.axis("name", {
        tickLine: null,
        grid: {
          alignTick: false,
          line: {
            style: {
              lineWidth: 1,
              lineDash: null,
              stroke: "rgba(255,255,255,0.1)",
            },
          },
        },
      });

      state.chart.axis("time", {
        title: null,
        grid: {
          alignTick: false,
          line: {
            style: {
              lineWidth: 1,
              lineDash: null,
              stroke: "rgba(255,255,255,0.1)",
            },
          },
        },
      });

      state.chart.tooltip({
        showMarkers: false,
        title: (value, data) => `${state.yData[data.time]}（${value}）`,
      });

      state.chart
        .polygon()
        .position("name*time")
        .color("value", "#BAE7FF-#1890FF-#0050B3")
        // .label("value", {
        //   offset: -2,
        //   style: {
        //     fill: "#fff",
        //     shadowBlur: 2,
        //     shadowColor: "rgba(0, 0, 0, .45)",
        //   },
        // })
        .style({
          lineWidth: 1,
          stroke: "#fff",
        });

      state.chart.interaction("element-active");

      state.chart.render();
    };

    watch(
      () => store.getters.centerControl.MeetingRoom_bookWeekRatio,
      (val) => {
        if (val) {
          getData();
        }
      }
    );

    const getData = () => {
      state.yData = [];
      state.data = [];
      for (let i = 0; i <= 24; i++) {
        state.yData.push(`${i < 10 ? "0" + i : i}:00`);
      }
      const { MeetingRoom_bookWeekRatio } = store.getters.centerControl;
      if (MeetingRoom_bookWeekRatio) {
        state.data = MeetingRoom_bookWeekRatio;
        if (state.chart) {
          state.chart.changeData(state.data);
        } else {
          nextTick(() => {
            initChart();
          });
        }
      }
    };

    onMounted(() => {
      registerTheme("chartTheme", common.chartTheme);
      getData();
    });

    onBeforeUnmount(() => {
      const chartBox = document.getElementById(state.chartId);
      if (chartBox) {
        chartBox.innerHTML = "";
      }
    });
    return {
      ...toRefs(state),
    };
  },
});
</script>

<style lang="less" scoped>
@import "../../styles/common.less";
</style>
